<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../dist/css/car.css">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui-v2.5.4/layui/css/layui.css" media="all">
    <style>
        .xiangqing {
            /* background: wheat; */
            height: 380px;
            overflow-y: scroll;
            padding: 20px;
        }

        #test1 {
            margin-left: 20%;

        }

        #boxIMG {
            margin-left: 20%;

        }

        .jiage {
            padding: 18px;
            margin-left: 43%
        }

        .bianhao {
            font-size: 17px;
            padding: 18px;
            height: 120px;
            background: rgba(128, 128, 128, 0.151)
        }

        .canshu {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="carXin">
        <!-- 导航 -->
        <div class="dao">
            <span><img src="./pic/logo.png" alt=""></span>
            <a href="">首页</a>
            <a href="wangShang.html">网络商城</a>
            <a href="">店铺信息</a>
            <a href="shenghuo.html">生活良品研究所</a>
            <a href="ziXun.html">问题咨询</a>
            <a href="">人才招聘</a>
            <a href="hezuo.html">店铺合作伙伴</a>
            <a href="">企业情报</a>
            <a href="">何为无印良品</a>
        </div>
        <!-- 购物车板块 -->
        <div class="spCar">
            <!-- 固定头部 -->
            <div class="toubu">
                <span class="oa"><img style="width: 30px;height:30px" src="./pic/fanhui.png" alt=""></span>
                <span class="ob"> 商品详情</span>
                <span class="oc" style="color:#7f0019">
                    <img style="width: 35px;height:35px" src="./pic/picar.gif" alt="">
                </span>
            </div>
            <!-- 商品部分 -->
            <div class="xiangqing">
                <!-- 在这里引入一个轮播 -->
                <div class="layui-carousel" id="test1" lay-filter="test1">
                    <div id="boxIMG" carousel-item="">
                        <div><img src="./pic/xiang1.jpg" alt=""></div>
                        <div><img src="./pic/xiang2.jpg" alt=""></div>
                        <div><img src="./pic/xiang3.jpg" alt=""></div>
                        <div><img src="./pic/xiang4.jpg" alt=""></div>
                        <div><img src="./pic/xiang5.jpg" alt=""></div>
                    </div>
                </div>
                <!-- 轮播下价格和详情 -->
                <div class="jiage">
                    <h3>羊毛_编织图案围巾</h3>
                    <h2 style="color: rgba(255, 0, 0, 0.548)">￥128</h2>
                </div>
                <div class="bianhao">
                    <p>商品编号：4550002626303</p>
                    <p> 采用纯羊毛纱线织造而成的围巾，</p>
                    <p>具有良好的保温性。</p>
                    <p>采用纯羊毛纱线织造而成的围巾， 具有良好的保温性。 _</p>
                    <p>...........</p>
                </div>

                <div class="canshu">
                    <h3>产品参数</h3>
                </div>
                <div>
                    <h3>参数列表略...</h3>
                </div>
            </div>
            <div class="anniu">
                <img style="height: 50px;width:40px" src="./pic/kefu.gif" alt="">
                <img style="height: 50px;width:500px" src="./pic/jiaru.gif" alt="">
                <img style="height: 50px;width:500px" src="./pic/goumai.gif" alt="">
            </div>

        </div>



    </div>
</body>
<script src="../jquery-1.11.3.js"></script>
<script src="../layui-v2.5.4/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;
        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
            , interval: 5000
        });
    });
</script>

</html>